<template>
  <el-tabs value="0">
    <el-tab-pane label="属性" name="0">
      <el-collapse accordion value="0">
        <el-collapse-item title="常规设置" name="0">
          <el-form label-width="80px" size="mini">
            <el-form-item label="图层名称">
              <el-input v-model="widget.layer.name" clearable></el-input>
            </el-form-item>
            <!-- 通用文本 与 滚动文本 -->
            <template v-if="showWidget('text') || showWidget('marquee')">
              <el-form-item label="文本内容">
                <el-input
                  type="textarea"
                  v-model="widget.data.value"
                ></el-input>
              </el-form-item>
              <el-form-item label="字体颜色">
                <el-col :span="19">
                  <el-input v-model="widget.option.color"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.color"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="字体大小">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.fontSize"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="字体粗细">
                <el-select
                  v-model="widget.option.fontWeight"
                  popper-class="black-select"
                >
                  <el-option label="normal" value="normal"></el-option>
                  <el-option label="bold" value="bold"></el-option>
                  <el-option label="bolder" value="bolder"></el-option>
                  <el-option label="lighter" value="lighter"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="水平位置">
                <el-select
                  v-model="widget.option.textAlign"
                  popper-class="black-select"
                >
                  <el-option label="left" value="left"></el-option>
                  <el-option label="center" value="center"></el-option>
                  <el-option label="right" value="right"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="行高">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.lineHeight"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="背景颜色">
                <el-col :span="19">
                  <el-input v-model="widget.option.backgroundColor"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    :show-alpha="true"
                    v-model="widget.option.backgroundColor"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
            </template>
            <!-- 滚动文本 -->
            <template v-if="showWidget('marquee')">
              <el-form-item label="持续时间">
                <el-slider
                  :min="1"
                  :max="50"
                  v-model="widget.option.marquee.duration"
                ></el-slider>
              </el-form-item>
            </template>
            <!-- 图片样式 -->
            <template v-if="showWidget('image')">
              <el-form-item label="图片">
                <el-col :span="19">
                  <el-input v-model="widget.option.data.value"></el-input>
                </el-col>
                <el-col :span="5">
                  <image-upload @uploadSuccess="uploadSuccess"></image-upload>
                </el-col>
              </el-form-item>
              <el-form-item label="边框颜色">
                <el-col :span="19">
                  <el-input v-model="widget.option.borderColor"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    v-model="widget.option.borderColor"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="边框宽度">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.borderWidth"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="透明度">
                <el-slider
                  :min="0"
                  :max="1"
                  :step="0.1"
                  v-model="widget.option.opacity"
                ></el-slider>
              </el-form-item>
              <el-form-item label="背景颜色">
                <el-col :span="19">
                  <el-input v-model="widget.option.backgroundColor"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    :show-alpha="true"
                    v-model="widget.option.backgroundColor"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
            </template>
            <template v-if="showWidget('table')">
              <el-form-item label="显示行数">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.rowNumber"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="边框颜色">
                <el-col :span="19">
                  <el-input v-model="widget.option.borderColor"></el-input>
                </el-col>
                <el-col :span="5">
                  <el-color-picker
                    :show-alpha="true"
                    v-model="widget.option.borderColor"
                  ></el-color-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="开启滚动">
                <el-switch v-model="widget.option.scroll.enable"> </el-switch>
              </el-form-item>
              <el-form-item label="滚动时间">
                <el-input-number
                  controls-position="right"
                  v-model="widget.option.scroll.time"
                ></el-input-number>
              </el-form-item>
            </template>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="表头设置" name="1" v-if="showWidget('table')">
          <el-form label-width="80px" size="mini">
            <el-form-item label="字体大小">
              <el-input-number
                controls-position="right"
                v-model="widget.option.header.fontSize"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="字体粗细">
              <el-select
                v-model="widget.option.header.fontWeight"
                popper-class="black-select"
              >
                <el-option label="normal" value="normal"></el-option>
                <el-option label="bold" value="bold"></el-option>
                <el-option label="bolder" value="bolder"></el-option>
                <el-option label="lighter" value="lighter"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-col :span="19">
                <el-input v-model="widget.option.header.color"></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.header.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="背景颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.header.backgroundColor"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.header.backgroundColor"
                ></el-color-picker>
              </el-col>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="表体设置" name="2" v-if="showWidget('table')">
          <el-form label-width="80px" size="mini">
            <el-form-item label="字体大小">
              <el-input-number
                controls-position="right"
                v-model="widget.option.body.fontSize"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="字体粗细">
              <el-select
                v-model="widget.option.body.fontWeight"
                popper-class="black-select"
              >
                <el-option label="normal" value="normal"></el-option>
                <el-option label="bold" value="bold"></el-option>
                <el-option label="bolder" value="bolder"></el-option>
                <el-option label="lighter" value="lighter"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字体颜色">
              <el-col :span="19">
                <el-input v-model="widget.option.body.color"></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.body.color"
                ></el-color-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="奇数行颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.body.oddBackgroundColor"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.body.oddBackgroundColor"
                ></el-color-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="偶数行颜色">
              <el-col :span="19">
                <el-input
                  v-model="widget.option.body.evenBackgroundColor"
                ></el-input>
              </el-col>
              <el-col :span="5">
                <el-color-picker
                  v-model="widget.option.body.evenBackgroundColor"
                ></el-color-picker>
              </el-col>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="数据设置" name="3" v-if="showWidget('table')">
          <div class="table-props">
            <div class="table-props-header">
              <div class="table-cell" style="width: 100px">
                <i class="el-icon-plus" @click="addTableHeader"></i> 表头
              </div>
              <div class="table-cell" style="width: 100px">Key名</div>
              <div class="table-cell" style="width: 75px">列宽</div>
              <div class="table-cell" style="width: 45px">操作</div>
            </div>
            <div class="table-props-body">
              <div
                class="table-props-body-row"
                v-for="(data, index) in widget.option.header.data"
                :key="index"
              >
                <div class="table-cell" style="width: 100px">
                  <el-input
                    v-model="widget.option.header.data[index].label"
                  ></el-input>
                </div>
                <div class="table-cell" style="width: 100px">
                  <el-input
                    v-model="widget.option.header.data[index].key"
                  ></el-input>
                </div>
                <div class="table-cell" style="width: 75px">
                  <el-input
                    v-model="widget.option.header.data[index].width"
                  ></el-input>
                </div>
                <div class="table-cell" style="width: 45px; padding-top: 2px">
                  <i
                    class="el-icon-delete text-click"
                    @click="deleteTableHeader(index)"
                  ></i>
                </div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-tab-pane>
    <el-tab-pane label="数据" name="1">
      <widget-data :widget="widget"></widget-data>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import WidgetData from "./WidgetData.vue";
import ImageUpload from "../part/ImageUpload.vue";
export default {
  props: {
    widget: {
      type: [Object],
      default: () => {},
    },
  },
  methods: {
    showWidget(vallue) {
      return this.widget.entity === "others-" + vallue;
    },
    addTableHeader() {
      this.widget.option.header.data.push({
        key: "",
        label: "",
        width: "",
      });
    },
    deleteTableHeader(index) {
      this.widget.option.header.data.splice(index, 1);
    },
    uploadSuccess(imageUrl) {
      this.widget.option.data.value = imageUrl;
    },
  },
  components: {
    WidgetData,
    ImageUpload,
  },
};
</script>
<style lang="stylus">
.table-props {
  .table-cell {
    height: 100%;
    flex-grow: 1;
    text-align: center;
    box-sizing: border-box;
    border-right: 1px solid #221f1f;
  }

  .table-props-header {
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #221f1f;
    display: flex;

    .table-cell {
      line-height: 40px;

      &:first-child {
        position: relative;

        i {
          position: absolute;
          top: 14px;
          left: 12px;
          font-size: 12px;
          color: #409EFF;
          cursor: pointer;
        }
      }
    }
  }

  .table-props-body {
    .table-props-body-row {
      height: 30px;
      display: flex;
      border: 1px solid #221f1f;
      box-sizing: border-box;

      .table-cell {
        padding: 2px 5px;

        .el-input {
          height: 25px;

          .el-input__inner {
            height: 100%;
            border-color: #000;
            border-radius: 0;
            color: #fff;
            background-color: #0f1014;
          }
        }
      }
    }
  }
}
</style>